<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <!-- 新增用户按钮 -->
            <el-row :gutter="20">
                <el-col :span="2">
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="showAddCateDialog()">新增分类
                    </el-button>
                </el-col>
            </el-row>
            <el-row>
                <tree-table :selection-type="false" :data="cateList" :columns="columns" :expand-type="false"
                    class="tree-table" border :show-index="true">
                    <template slot="level" slot-scope="scope">
                        <el-tag v-if="scope.row.level === 1"> 一级分类 </el-tag>
                        <el-tag v-else-if="scope.row.level === 2" type="success"> 二级分类 </el-tag>
                        <el-tag v-else type="warning"> 三级分类 </el-tag>
                    </template>
                    <template slot="opt" slot-scope="scope">
                        <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
                    </template>
                </tree-table>
            </el-row>
        </el-card>
        <!-- 新增窗口 -->
        <el-dialog title="增加分类" :visible.sync="adCateDialogVisible" width="30%" @close="closeCateDialog">
            <el-form :model="addCateForm" :rules="addCateRules" ref="addCateRef" label-width="80px">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="addCateForm.name"></el-input>
                </el-form-item>
                <el-form-item label="父类节点">
                    <el-cascader v-model="selectKeys" :options="catePidlist" clearable
                        :props="{ expandTrigger: 'hover', label: 'name', value: 'id', 
                        checkStrictly: true }" 
                        @change="chanageSeletor()"
                        separator=">">
                    </el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addCate">确定</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script >

export default {
    data() {
        return {
            cateList: [],
            columns: [
                {
                    label: '分类名称',
                    prop: 'name'
                },
                {
                    label: '分类等级',
                    type: 'template',
                    template: "level",
                },
                {
                    label: '操作',
                    type: 'template',
                    template: "opt",
                },
            ],
            adCateDialogVisible: false,
            addCateForm: {
                name:'',
                pid:0,
                level:1
            },
            addCateRules: {
                name: [{ required: true, message: "请输入分类名称", trigger: 'blur' }]
            },
            catePidlist: [],
            selectKeys: [],

        }
    },
    created() {
        this.getCateList()
    },
    methods: {
        async getCateList() {
            const { data: resp } = await this.$axios.get("/api/category_list")
            if (resp.status !== 200) return this.$msg.error(resp.msg)
            this.cateList = resp.data.data
        },
        showAddCateDialog() {
            this.getCatePidList()
            this.adCateDialogVisible = true
            // console.log(this.catePidlist);
        },
        async addCate() {
            const {data:resp} = await this.$axios.post("/api/category",this.$qs.stringify(this.addCateForm))
            if (resp.status !== 200) return this.$msg.error(resp.msg)
            this.$msg.success(resp.msg)
            this.getCateList()
            this.closeCateDialog()
        },
        async getCatePidList() {
            const { data: resp } = await this.$axios.get("/api/category_list", { params: { level: 2 } })
            this.catePidlist = resp.data.data
            // console.log(this.catePidlist);
        },
        chanageSeletor() {
            console.log(this.selectKeys);
            if (this.selectKeys.length>0){
                this.addCateForm.pid = this.selectKeys[this.selectKeys.length-1]
                this.addCateForm.level = this.selectKeys.length+1 
            }else{
                this.addCateForm.pid = 0
                this.addCateForm.level = 1
            }
        },
        closeCateDialog(){
            this.$refs.addCateRef.resetFields()
            this.selectKeys = []
            this.addCateForm.level = 1
            this.addCateForm.pid = 0
            this.adCateDialogVisible = false

        }
    }
}

</script>

<style lang="less" scoped>
.tree-table {
    margin-top: 20px;
}
</style>